<template>
	<div class="content">
		<div class="flex borderea paddingbottom10 box-align-center">
			<div class="title flex-1">标准管理概览</div>
			<div class="flex">
				<div v-if="bzactivetype > 0" class="tabbj flex box-align-center">
					<span v-for="(value, index) in bzyearlist" :key="index" :class="{ active: bzactiveyear === index }" @click="bzyearchange(index, value)">{{
						value
					}}</span>
				</div>

				<div class="tabbj ml10 flex box-align-center">
					<span v-for="(value, index) in typelist" :key="index" :class="{ active: bzactivetype === index }" @click="bztypechange(index)">{{
						value
					}}</span>
				</div>
			</div>
		</div>

		<!-- 数据表 -->
		<div v-if="bzactivetype === 0" class="parent mt10">
			<div class="child">
				<div class="parenttitle flex-1">上海地方现行标准</div>
				<div class="parennumber">
					<span>{{ biaozhunform.currentStandards }}</span
					>本
				</div>
			</div>
			<div class="child">
				<div class="parenttitle flex-1">上海地方在编标准</div>
				<div class="parennumber">
					<span>{{ biaozhunform.draftingStandards }}</span
					>本
				</div>
			</div>
			<div class="child">
				<div class="parenttitle flex-1">上海地方在编新编</div>
				<div class="parennumber">
					<span>{{ biaozhunform.newDraftingStandards }}</span
					>本
				</div>
			</div>
			<div class="child">
				<div class="parenttitle flex-1">上海地方在编修订</div>
				<div class="parennumber">
					<span>{{ biaozhunform.revisingDraftingStandards }}</span
					>本
				</div>
			</div>
			<div class="child">
				<div class="parenttitle flex-1">上海地方标准作废</div>
				<div class="parennumber">
					<span>{{ biaozhunform.abolishedStandards }}</span
					>本
				</div>
			</div>
		</div>

		<!-- 图表 -->
		<div v-if="bzactivetype === 1" class="parent mt10">
			<div ref="chartRefbzgl" style="width: 100%; height: 100%"></div>
		</div>

		<!-- 表格 -->
		<div v-if="bzactivetype === 2" class="parent mt10">
			<DynamicTable :x-legend="bzgltablelegendx" :y-legend="bzgltablelegendy" :values="bzgltablevalues" />
		</div>
	</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import moment from 'moment'
import DynamicTable from './DynamicTable.vue'
</script>
<style lang="scss" scoped>
.anniu .el-form-item {
	margin-right: 10px !important;
}

.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}

.title {
	font-size: 20px;
	text-align: center;
}

.subtitle {
	font-size: 16px;
	margin: 30px 0 10px;
}

.form {
	display: flex;
	flex-wrap: wrap;

	.item {
		display: flex;
		align-items: center;
		min-width: 33.33%;

		.label {
			font-size: 14px;
			height: 30px;
			line-height: 30px;
		}

		.value {
			padding: 2px 20px 2px 5px;
			border-bottom: solid 1px #333;
			font-size: 14px;
			margin-right: 50px;
			flex: 1;
			height: 30px;
			line-height: 30px;
		}
	}
}

.form2 {
	margin-top: 20px;

	.label {
		line-height: 20px;
	}

	.value {
		border-bottom: solid 1px #333;
		font-size: 14px;
		line-height: 28px;
	}
}
</style>
